<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
    <link rel="stylesheet" href="css/headerCss.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        body {
            font-family: Microsoft YaHei,Helvetica,Arial,sans-serif;
            background-color: #fff;
            -webkit-font-smoothing: subpixel-antialiased;
        }
        div {
            display: block;
        }
        dl {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .container {
            width: 1300px;
            margin: 0 ;
        }
        .wrapper {
            overflow: hidden;
        }
       .main{
            width: 950px;
            margin: 0 auto;
        }
        .board-content, .update-time {
            text-align: center;
            font-size: 12px;
            color: #999;
        }
        dd, dl, h4, li, p, ul {
            padding: 0;
            margin: 0;
        }
        div>p{
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .board-content {
            margin-top: 6px;
        }
        .board-content, .update-time {
            text-align: center;
            font-size: 18px;
            color: #999;
        }
        .board-wrapper {
            margin-top: 40px;
        }
        .board-wrapper dd {
            margin-bottom: 30px;
            font-size: 0;
            position: relative;
            overflow: hidden;
        }
        i {
            font-style: italic;
        }
        .board-index {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #f7f7f7;
            font-size: 18px;
            color: #999;
            font-weight: 700;
            position: absolute;
            left: 0;
            top: 85px;
        }
        a {
            text-decoration: none;
        }
        .board-wrapper .image-link {
            display: inline-block;
            width: 160px;
            height: 220px;
            margin-left: 80px;
            position: relative;
            float: left;
        }
        .board-wrapper .image-link .poster-default {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 160px;
            height: 220px;
            margin-left: -20px;
            margin-top: -31px;
        }

        a:-webkit-any-link {
            color: -webkit-link;
            cursor: pointer;
        }
        .board-item-main {
            display: inline-block;
            width: 680px;
            margin-left: 30px;
            height: 219px;
            float: right;
            line-height: 219px;
            border-bottom: 1px solid #e5e5e5;
        }
        .board-item-content {
            display: inline-block;
            vertical-align: middle;
            width: 680px;
            font-size: 0;
            line-height: 1;
        }
        .movie-item-info {
            font-size: 16px;
            display: inline-block;
            width: 420px;
            vertical-align: middle;
        }
        .board-item-content .name a {
            font-size: 26px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 420px;
            display: block;
        }
        .board-item-content .star {
            margin-top: 18px;
            color: #333;
        }
        .movie-item-info .star {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .board-img {
            vertical-align: middle;
            position: absolute;
            left: 0;
            top: 0;
        }
        .board-item-content .releasetime {
            margin-top: 8px;
            color: #999;
        }
        .movie-item-number {
            display: inline-block;
            text-align: right;
            width: 260px;
            vertical-align: top;
            margin-top: 10px;
            font-size: 16px;
        }
        .score-num .integer {
            font-size: 56px;
            font-weight: 700;
        }
        .score-num {
            color: #ffb400;
        }
        .board-index-1 {
            background: url();
            font-size: 0;
        }
        .score-num .fraction {
            font-size: 30px;
            font-weight: 700;
        }
        .board-wrapper dd {
            margin-bottom: 30px;
            font-size: 0;
            position: relative;
            overflow: hidden;
        }
        .board-index-2, .board-index-3 {
            background: #ffb400;
            color: #fff;
        }
        .poster-default{
            width:160px ;
            height: 220px;
        }
        .movie-item-number {
            display: inline-block;
            text-align: right;
            width: 260px;
            vertical-align: top;
            margin-top: 10px;
            font-size: 16px;
        }

        .has-fresh-text {
            color: #ffb400;
            margin-left: 4px;
        }
        .subnav{
            background-color: #47464a;
            height: 60px;
            width: 100%;
            min-width: 1200px;
            text-align: center;
        }
        .search-ul{
            display: inline-block;
            overflow: hidden;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .search-ul li{
            display: inline-block;
            float: left;
        }
        .search-ul li a{
            display: block;
            font-size: 16px;
            color: #999;
            height: 60px;
            line-height: 60px;
            padding: 0 40px;
        }
    </style>
</head>
<body>
<myheader :search="search"></myheader>
<div style="height: 100px"></div>
<div class="subnav">
    <ul class="search-ul">
        <li><a href="./list100.html" >TOP100榜</a></li>
        <li><a href="./listpopular.html"  style="color: red">最受期待榜</a></li>
    </ul>

</div>
<div class="container" id="app">
<div class="content">
    <div class="wrapper">
        <div class="main">
            <dl class="board-wrapper">
                <dd>
                    <i class="board-index board-index-1">1</i>
                    <a href="" title="1950他们正年轻" class="image-link" data-act="boarditem-click" data-val="{movieId:1413319}">
                        <img src="https://p1.meituan.net/movie/2a699851bed2717ebf37da80d3e2fb901350390.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="" title="1950他们正年轻" data-act="boarditem-click" data-val="{movieId:1413319}">1950他们正年轻</a></p>
                                <p class="star">
                                    主演：薛英杰,叶发坤,雍卫太
                                </p>
                                <p class="releasetime">上映时间：2021-09-03</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-2">2</i>
                    <a href="" title="长津湖" class="image-link" data-act="boarditem-click" data-val="{movieId:257706}">
                        <img src="https://p0.meituan.net/movie/0e81560dc9910a6a658a82ec7a054ceb5075992.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="#" title="长津湖" data-act="boarditem-click" data-val="{movieId:257706}">长津湖</a></p>
                                <p class="star">
                                    主演：吴京,易烊千玺,段奕宏
                                </p>
                                <p class="releasetime">上映时间：2021-09-30</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-3">3</i>
                    <a href="#" title="我和我的父辈" class="image-link" data-act="boarditem-click">
                        <img src="https://p1.meituan.net/mmdb/ceab1c48a4a1e2d9fe941757ee2f5152256864.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="" title="我和我的父辈" data-act="boarditem-click" data-val="{movieId:1417305}">我和我的父辈</a></p>
                                <p class="star">
                                    主演：吴京,章子怡,徐峥
                                </p>
                                <p class="releasetime">上映时间：2021-09-30</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-4">4</i>
                    <a href="" title="五个水的少年" class="image-link" data-act="boarditem-click" data-val="{movieId:1328693}">
                        <img src="https://p0.meituan.net/mmdb/81ca765741e6bbb430d213f736a50c964487800.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="" title="五个扑水的少年" data-act="boarditem-click" data-val="{movieId:1328693}">五个扑水的少年</a></p>
                                <p class="star">
                                    主演：辛云来,冯祥琨,李孝谦
                                </p>
                                <p class="releasetime">上映时间：2021-10-01</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-5">5</i>
                    <a href="/films/1356063" title="峰爆" class="image-link" data-act="boarditem-click" data-val="{movieId:1356063}">
                        <img src="https://p0.meituan.net/mmdb/e93bb766c6fe26424f6f9609d99768de3910793.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="/films/1356063" title="峰爆" data-act="boarditem-click" data-val="{movieId:1356063}">峰爆</a></p>
                                <p class="star">
                                    主演：朱一龙,黄志忠,陈数
                                </p>
                                <p class="releasetime">上映时间：2021-09-17</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-6">6</i>
                    <a href="/films/1236912" title="远去的牧歌" class="image-link" data-act="boarditem-click" data-val="{movieId:1236912}">
                        <img src="https://p0.meituan.net/movie/c0433df2d57619a0a6774106feb124524057271.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="/films/1236912" title="远去的牧歌" data-act="boarditem-click" data-val="{movieId:1236912}">远去的牧歌</a></p>
                                <p class="star">
                                    主演：海拉提·哈木,玛尔江.巴依吐肯,丽娜·夏侃
                                </p>
                                <p class="releasetime">上映时间：2018-09-11</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-7">7</i>
                    <a href="#" title="保家卫国——抗美援朝光影纪实" class="image-link" data-act="boarditem-click" >
                        <img src="https://p0.meituan.net/movie/5dd1ad333dd83d8498aa9450b12bc0fd3332732.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                        <img data-src="" class="board-img" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="#" title="保家卫国——抗美援朝光影纪实" data-act="boarditem-click">保家卫国——抗美援朝光影纪实</a></p>
                                <p class="star">
                                    主演：张涵予,王瑜本,王忠礼
                                </p>
                                <p class="releasetime">上映时间：2020-10-25</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-8">8</i>
                    <a href="/films/1360088" title="关于我妈的一切" class="image-link" data-act="boarditem-click" >
                        <img src="https://p0.meituan.net/movie/c9f8427157e1a00c5d0c285807332c3e4925236.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="#" title="关于我妈的一切" data-act="boarditem-click" >关于我妈的一切</a></p>
                                <p class="star">
                                    主演：徐帆,张婧仪,许亚军
                                </p>
                                <p class="releasetime">上映时间：2021-09-19</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-9">9</i>
                    <a href="/films/1331267" title="一点就到家" class="image-link" data-act="boarditem-click">
                        <img src="https://p1.meituan.net/movie/c16b0a68f95d884d428f339f8eacce834410200.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="#" title="一点就到家" data-act="boarditem-click" >一点就到家</a></p>
                                <p class="star">
                                    主演：刘昊然,彭昱畅,尹昉
                                </p>
                                <p class="releasetime">上映时间：2020-10-04</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
                <dd>
                    <i class="board-index board-index-10">10</i>
                    <a href="/films/1298314" title="皮皮鲁与鲁西西之罐头小人" class="image-link" data-act="boarditem-click">
                        <img src="https://p0.meituan.net/movie/b862a85e39d28201838f98961e09d7191298056.jpg@160w_220h_1e_1c" alt="" class="poster-default" />
                    </a>
                    <div class="board-item-main">
                        <div class="board-item-content">
                            <div class="movie-item-info">
                                <p class="name"><a href="#" title="皮皮鲁与鲁西西之罐头小人" data-act="boarditem-click" >皮皮鲁与鲁西西之罐头小人</a></p>
                                <p class="star">
                                    主演：洪悦熙,庄则熙,田雨
                                </p>
                                <p class="releasetime">上映时间：2021-09-30</p>    </div>
                            <div class="movie-item-number score-num">
                                <p class="score" style="font-size: 22px">27481人想看</p>
                            </div>

                        </div>
                    </div>

                </dd>
            </dl>

        </div>
    </div>
</div>

</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/header.js"></script>
</body>
</html>